window.addEventListener('DOMContentLoaded', () =>{
    let main = document.getElementById('main')
    fetch('../admin/list.do')
        .then(resp => {
            if (!resp.ok) {
                throw new Error(resp.status)
            }
            return resp.json()
        })
        .then(data => {
            console.log(data)
            for (let item of data) {
                let node = createItemNode(item)
                main.appendChild(node)
            }
        })
    main.addEventListener('click', event => {
        let target = event.target
        let id = target.dataset.id
        console.log(id)
        fetch('/admin/delete.do?id=' + id)
            .then(resp => {
                if (!resp.ok) {
                    alert("删除失败")
                    return
                }
                target.closest(".col-3").remove()
            })
    })
})
function createItemNode(item) {
    let ele = document.createElement('div')
    ele.className = 'col-3'
    // ele.style.width = '19.6rem'
    ele.innerHTML = `
    <div class="card m-2" >
        <button class="btn-close "  data-id="${item.id}" type="button"></button>
        <img src="/uploads/${item.reFilename}" class="card-img-top">
        <div class="card-body">
            <p class="card-text">姓名：${item.name}</p>
            <p class="card-text">性别：${item.sex}</p>
            <p class="card-text">爱好：${item.hobbies}</p>
        </div>
    </div>
    `
    return ele
}